<template>
  <view
    :key="key"
    class="container"
    :class="[nightMode && 'theme--dark', { 'container--lock-scroll': windowLockScroll }]"
    :style="[getRootStyle]"
  >
    <view class="container__header">
      <slot name="header" />
    </view>
    <view :style="[getStyle, { minHeight: height + 'px' }]" class="container__box">
      <slot></slot>
      <!-- <nv-tabbar v-if="!isAppPlus" /> -->
      <!-- <view v-if="isAppPlus && showTabbar" class="tabbar__placeholder"></view> -->
    </view>
    <m-modal />
    <nv-preview />
  </view>
</template>

<script lang="ts">
import {
  defineComponent,
  watch,
  ref,
  computed,
  onMounted,
  reactive,
  toRefs,
  provide,
  onUnmounted,
} from '@vue/composition-api'
import store from '@/store/index'
import { useRouter } from '@/hooks'
import settings from '@/settings'
import { isAppPlus, isH5, isMp } from '@/utils/platform'
import NvPreview from '@/components/subnvue/preview.nvue'
import NvTabbar from '@/components/subnvue/tabbar.nvue'
import addColor from '@/utils/add-color'
import getCurrentComponent from '@/utils/get-current-component'

export default defineComponent({
  components: {
    NvPreview,
    NvTabbar,
  },
  props: {
    shareShow: {
      type: Boolean,
      default: false,
    },
    shareOptions: {
      type: Object,
      default: () => ({}),
    },
    color: {
      type: String,
      default: '#EEF3F9',
    },
    padding: {
      type: String,
      default: '0rpx',
    },
    needCardBg: {
      type: Boolean,
      default: false,
    },
    attachment: {
      type: String,
      default: 'scroll',
    },
    bg: {
      type: String,
      default: '',
    },
    beforeMakeCanvas: {
      type: Boolean,
      default: false,
    },
  },
  emits: ['closeShare'],
  setup(props, { slots, emit }) {
    const vm: any = getCurrentComponent()
    store.commit('modal/setModalShow', false)
    const getIsCard = computed(() => settings.css['--card-style'] === 'card')
    const systemInfo: any = uni.getSystemInfoSync()
    const navbarHeight = systemInfo.platform == 'ios' ? 44 : 48
    const top = systemInfo.statusBarHeight + navbarHeight
    const bottom = systemInfo.windowBottom
    const windowTop = ref(top)
    const windowBottom = ref(bottom)
    const windowLockScroll = ref(false)

    provide('windowTop', windowTop)
    provide('windowBottom', windowBottom)
    provide('windowLockScroll', {
      setLockScroll: (x) => (windowLockScroll.value = x),
    })

    const router = useRouter()
    const showTabbar = ref(false)
    const state = reactive({
      height: 770,
      nightMode: (store as any).state?.app?.nightMode,
      showPopupPoster: false,
      posterOptions: {},
      key: router.currentRoute.path,
      innerShareShow: false,
      tabbarList: [],
    })

    const res: any = uni.getSystemInfoSync()
    state.height = res.windowHeight
    const getStyle = computed(() => ({
      background: props.bg
        ? props.bg
        : addColor((props.needCardBg && getIsCard.value) || props.color === 'transparent' ? '#f5f5f5' : props.color),
      backgroundAttachment: props.attachment,
      borderRadius: slots.header ? '16rpx 16rpx 0 0' : '',
      padding: props.padding,
      '--height': state.height + 'px',
    }))

    const initList = () => {
      const storeList = (store as any).state?.tabbar?.list
      const value = [...storeList, { pagePath: '/pages/store/index' }].findIndex(
        (x) => x.pagePath === router.currentRoute.path
      )
      showTabbar.value = value >= 0
      if (value >= 0) {
        windowBottom.value = 50
      } else {
        windowBottom.value = 0
      }
    }

    const getRootStyle = computed(() => {
      if (state.nightMode) {
        return {
          '--cf': '#333',
          '--cf5': '#000',
          '--c26': '#fff',
          '--c6': '#ccc',
          '--c9': '#999',
          '--cc': '#666',
          '--ce': '#333',
          '--cd9': '#666',
          '--c0': '#fff',
        }
      }

      return {
        '--cf': '#fff',
        '--cf5': '#f5f5f5',
        '--c26': '#262626',
        '--c6': '#666',
        '--c9': '#999',
        '--cc': '#ccc',
        '--ce': '#eee',
        '--cd9': '#d9d9d9',
        '--c0': '#000',
      }
    })

    // app端现在不支持vuex+setup+computed 修改成这样的写法 小程序的immediate还报错

    watch(
      () => [(store as any).state?.app?.nightMode, props.shareShow, (store as any).state?.app?.groupShow],
      (vals) => {
        const [nightMode, shareShow] = vals
        state.nightMode = nightMode
        state.innerShareShow = shareShow

        uni.$on('shareShow', (e) => {
          !e && emit('closeShare')
          state.showPopupPoster = !!e && e.noBeforeMake
          state.posterOptions = e
        })
      },
      {
        immediate: true,
      }
    )

    const getShowPoster = computed(() => ('showPoster' in props.shareOptions ? props.shareOptions.showPoster : true))

    const handleCloseShare = (e) => {
      emit('update:share-show', false)
      !e && emit('closeShare')
    }

    onMounted(async () => {
      if ((store as any).state?.tabbar?.list?.length === 0) {
        // 这里只加载一次 tabbar中渲染完毕会调一次
        await store.dispatch('tabbar/getList', { terminal: 2, type: 22, vm })
      }
      initList()
    })

    onUnmounted(() => {
      uni.$emit('shareShow', null)
    })

    return {
      showTabbar,
      getStyle,
      isAppPlus,
      isH5,
      isMp,
      ...toRefs(state),
      getRootStyle,
      windowTop,
      windowBottom,
      windowLockScroll,
      handleCloseShare,
      getShowPoster,
    }
  },
})
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  background-color: transparent;

  color: $--font-primary-c;

  &--lock-scroll {
    overflow: hidden !important;
    // position: fixed;
    // top: 0;
    // left: 0;
    // right: 0;
    // bottom: 0;
  }
  &__box {
    display: flex;
    flex-direction: column;
  }

  .tabbar__placeholder {
    height: 100rpx;
  }
}
</style>
